<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>软件交接清单模版</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
    }

    .container {
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
      padding: 10px;
      border-bottom: 2px solid #3498db;
      outline: none;
      font-weight: bold;
    }

    .button-container {
      position: fixed;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .download-btn{
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 30px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      transition: transform 0.3s, box-shadow 0.3s;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      width: 150px;
    }


    .download-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    th,
    td {
      border: 1px solid #000;
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
      font-weight: bold;
      text-align: center;
    }

    @media print {
      .button-container {
        display: none;
      }
      .container {
        box-shadow: none;
      }
      body {
        padding: 0;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 contenteditable="true">XX平台交接清单</h1>

    <div class="button-container">
      <button class="download-btn" onclick="printDocument()">打印文档</button>
    </div>

    <table id="handover-table">
      <thead>
        <tr>
          <th width="10%">类别</th>
          <th width="15%">具体内容</th>
          <th width="20%">详细描述</th>
          <th width="20%">交接资料</th>
          <th width="10%">交接人</th>
          <th width="10%">接收人</th>
          <th width="15%">交接时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">技术架构</td>
          <td>系统架构图</td>
          <td>提供整体架构图，包括前端、后端、数据库、服务器等组件及相互关系</td>
          <td>架构图文件路径或图片</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>技术栈</td>
          <td>列出使用的编程语言、框架、库、数据库系统等</td>
          <td>如：前端 - Vue.js，后端 - Python（Flask），数据库 - MySQL相关说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>服务器信息</td>
          <td>服务器提供商、服务器配置（CPU、内存、硬盘等）、服务器地址、登录账号和密码</td>
          <td>服务器配置详情文档、登录信息文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>网络配置</td>
          <td>网络拓扑图、IP 地址分配、防火墙规则、负载均衡设置等</td>
          <td>网络拓扑图文件路径、相关配置说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="3">数据库</td>
          <td>数据库设计文档</td>
          <td>表结构设计、字段说明、索引设计、外键关系等</td>
          <td>数据库设计文档（含ER图及说明）文件路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>数据备份策略与恢复流程</td>
          <td>备份频率、备份方式（全量/增量）、备份存储位置、恢复操作步骤</td>
          <td>备份与恢复说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>数据库连接信息</td>
          <td>数据库地址、端口、用户名、密码、数据库名称</td>
          <td>连接信息文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="6">代码与开发</td>
          <td>代码仓库地址及权限</td>
          <td>代码托管平台（如GitLab、GitHub）地址、项目仓库路径、交接接收人所需权限</td>
          <td>仓库地址说明、权限申请流程文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>开发环境搭建指南</td>
          <td>所需软件工具（如IDE、编译器、版本管理工具等）、安装步骤、环境变量配置等</td>
          <td>开发环境搭建指南文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>部署流程</td>
          <td>从代码提交到生产环境的部署步骤，包括构建、测试、发布等环节</td>
          <td>部署流程文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>测试用例与报告</td>
          <td>功能测试、性能测试、安全测试等用例及测试报告</td>
          <td>测试用例与报告文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>软件源码</td>
          <td>源码存储位置及获取方式</td>
          <td>源码存储位置说明文档、获取操作指南</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td></td>
          <td>源码目录结构说明</td>
          <td>对源码的目录结构进行详细解释，每个目录的功能和包含的主要文件类型</td>
          <td>源码目录结构说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="3">业务逻辑</td>
          <td>业务流程说明</td>
          <td>平台核心业务流程的详细描述，如用户注册登录、商品交易、订单处理等</td>
          <td>业务流程说明文档（含流程图或文字详述）</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>业务规则</td>
          <td>各种业务规则，如用户权限规则、数据校验规则、业务流程流转条件等</td>
          <td>业务规则清单文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>关键算法</td>
          <td>平台中使用的关键算法，如推荐算法、搜索算法等的原理和实现说明</td>
          <td>关键算法说明文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="2">用户与权限</td>
          <td>用户管理系统</td>
          <td>用户信息存储结构、用户注册登录机制、用户信息修改流程等</td>
          <td>用户管理系统说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>权限管理系统</td>
          <td>角色定义、权限分配策略、不同角色的操作权限范围等</td>
          <td>权限管理系统说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="3">运营与维护</td>
          <td>日常运营任务</td>
          <td>如数据监控、用户反馈处理、内容审核等日常任务的流程和频率</td>
          <td>日常运营任务说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>常见问题及解决方法</td>
          <td>整理平台运营过程中遇到的常见问题及对应的解决方案</td>
          <td>常见问题解答文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>运维监控指标与工具</td>
          <td>监控的关键指标（如CPU使用率、内存使用率、系统响应时间等）、使用的监控工具及配置</td>
          <td>监控指标与工具说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="4">文档资料</td>
          <td>需求文档</td>
          <td>项目需求规格说明书，包括功能需求、非功能需求等</td>
          <td>需求文档文件路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>设计文档</td>
          <td>总体设计文档、详细设计文档，涵盖架构设计、模块设计等</td>
          <td>设计文档文件路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>操作手册</td>
          <td>面向管理员、用户的操作手册，指导如何使用平台各项功能</td>
          <td>操作手册文件路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>变更记录</td>
          <td>记录平台开发过程中的所有变更，包括功能添加、修改、删除等</td>
          <td>变更记录文档文件路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="2">培训与支持</td>
          <td>培训计划</td>
          <td>为接收人制定的培训计划，包括培训内容、培训方式、培训时间安排等</td>
          <td>培训计划文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>技术支持信息</td>
          <td>原开发团队或技术支持人员的联系方式，支持时间范围等</td>
          <td>技术支持信息文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td rowspan="3">安全相关</td>
          <td>安全策略与措施</td>
          <td>平台采取的安全防护措施，如身份验证、授权、加密、防攻击机制等</td>
          <td>安全策略说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>安全漏洞及修复记录</td>
          <td>已发现的安全漏洞及对应的修复措施和记录</td>
          <td>安全漏洞及修复文档路径</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
        <tr>
          <td>安全证书与密钥管理</td>
          <td>平台使用的安全证书信息（如SSL证书）、密钥存储位置及管理方式</td>
          <td>安全证书与密钥管理说明文档</td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    function printDocument() {
      const buttons = document.querySelectorAll('.download-btn, .print-btn');
      buttons.forEach(button => button.style.display = 'none');
      
      window.print();
      
      setTimeout(() => {
        buttons.forEach(button => button.style.display = 'block');
      }, 500);
    }
  </script>
</body>

</html>